<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  color: {
    type: String,
    default: '#3498db'
  },
  width: {
    type: Number,
    default: 2
  },
  scrollFactor: {
    type: Number,
    default: 1.2
  },
  easing: {
    type: String,
    default: '0.3s ease'
  }
});

const pathLength = ref(0);
const pathProgress = ref(0);
const svgPath = ref<SVGPathElement | null>(null);

const handleScroll = () => {
  const scrollTop = window.scrollY;
  const docHeight = Math.max(
    document.body.scrollHeight, 
    document.body.offsetHeight, 
    document.documentElement.clientHeight, 
    document.documentElement.scrollHeight, 
    document.documentElement.offsetHeight
  );
  const windowHeight = window.innerHeight;
  const scrollPercent = scrollTop / (docHeight - windowHeight);
  
  pathProgress.value = Math.min(Math.max(scrollPercent * props.scrollFactor, 0), 1);
};

onMounted(() => {
  if (svgPath.value) {
    pathLength.value = svgPath.value.getTotalLength();
  }
  window.addEventListener('scroll', handleScroll);
  setTimeout(() => {
    if (svgPath.value) {
      pathLength.value = svgPath.value.getTotalLength();
    }
    handleScroll();
  }, 100);
});

onUnmounted(() => {
  window.pxoveEventListener('scroll', handleScroll);
});
</script>

<template>
  <div class="curve-container">
    <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <path ref="svgPath" d="M0,0 
                          C250,100 350,150 500,200 
                          C650,250 750,300 1000,0 
                          L1000,400
                          C750,500 650,600 500,650
                          C350,700 250,800 0,400
                          L0,0" 
            fill="none" 
            :stroke="color" 
            :stroke-width="width"
            :style="{
              strokeDasharray: pathLength,
              strokeDashoffset: pathLength - pathLength * pathProgress
            }" />
    </svg>
  </div>
</template>

<style scoped>
.curve-container {
  position: fixed;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
}

svg {
  height: 100%;
  width: 100%;
}

path {
  transition: stroke-dashoffset v-bind(easing);
}
</style>